.container {
  background: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .init-data-loading {
    padding: 40rpx 24rpx;
  }

  .scroll-view {
    flex: 1;
    overflow: scroll;
    padding-bottom: 36rpx;
    .content {
      margin: 28rpx 24rpx;
      padding: 40rpx 24rpx;
      border-radius: 16rpx;
      background: #fff;
      .th-uni-row {
        font-size: 25rpx;
        font-weight: bold;
        color: #8c8c8c;
      }
      .td-uni-row {
        color: #8c8c8c;
        font-size: 25rpx;
        padding: 0.8rem 0;
        &:active {
          background-color: #f9f9f9;
        }
      }
      .text-left {
        text-align: left;
        word-break: break-all;
        white-space: nowrap;
        display: flex;
        justify-content: left;
        align-items: center;
        .level-icon-image {
          height: 32rpx;
          white-space: nowrap;
        }
        .text-left-nickname {
          margin-right: 5rpx;
          white-space: nowrap;
        }
      }
      .text-center {
        text-align: center;
      }
      .th-line {
        height: 1rpx;
        margin: 24rpx 0;
        background-color: #f0f0f0;
      }
      .proxy-tag {
        color: #d49e3b;
        white-space: nowrap;
        border-radius: 8rpx;
        padding: 5rpx 10rpx;
        margin-left: 10rpx;
        background: rgba(212, 158, 59, 0.1);
      }
      .distributors-tag {
        color: #b27163;
        white-space: nowrap;
        border-radius: 8rpx;
        padding: 5rpx 10rpx;
        margin-left: 10rpx;
        background: rgba(178, 113, 99, 0.1);
      }
    }
  }
}

.filter-client-number-warp {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 1rem 0.5rem;
  font-size: 28rpx;
  background-color: #fff;
  .flex-1 {
    flex: 1;
    text-align: center;
  }
  .client-number-line {
    width: 2px;
    height: 1rem;
    background-color: #f0f0f0;
    margin: 0 1rem;
  }
  .number-text {
    font-weight: bold;
    font-size: 32rpx;
  }
  text {
    font-weight: 400;
    font-size: 22rpx;
    color: #8c8c8c;
    line-height: 36rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: 8rpx;
  }
}

::v-deep .u-count-num {
  font-family: Medium !important;
}

.content {
  width: 100%;
  // height: ;
  position: relative;

  .myClient-text {
    width: 100%;
    height: 96rpx;
    .text-left {
      width: 140rpx;
      height: 36rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #8c8c8c;
      line-height: 36rpx;
      text-align: left;
      position: absolute;
      left: 32rpx;
      top: 32rpx;
    }
    .text-right {
      color: #8c8c8c;
      font-size: 24rpx;
      position: absolute;
      right: 32rpx;
      top: 32rpx;

      span {
        font-size: 32rpx;
      }
    }
  }

  .myClient-list {
    width: 702rpx;
    height: auto;
    overflow: hidden;

    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0rpx auto;

    .myClient-list-card {
      width: 638rpx;
      height: 132rpx;
      margin: 0 auto;
      padding-top: 32rpx;

      .list-card-box {
        width: 100%;
        height: 48rpx;
        display: flex;
        align-items: center;
        .list-card-top {
          width: 250rpx;
          height: 48rpx;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          position: relative;

          .list-card-name {
            width: 120rpx;
            color: #262626;
            font-size: 32rpx;
          }
          .list-card-identity {
            width: 128rpx;
            height: 38rpx;
            background: rgba(120, 160, 9, 0.05);
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            text-align: center;
            color: #78a009;
            font-size: 24rpx;
            line-height: 38rpx;
            font-weight: bold;
            margin-left: 10px;
          }
          .shopkeeper {
            width: 80rpx;
            height: 38rpx;
            color: #78a009;
            background: rgba(120, 160, 9, 0.05);
            border-radius: 40rpx 40rpx 40rpx 40rpx;
          }
          .distributor {
            width: 104rpx;
            height: 38rpx;
            color: #079bdf;
            background: rgba(7, 155, 223, 0.05);
            border-radius: 40rpx 40rpx 40rpx 40rpx;
          }
          .serviceCentre {
            width: 128rpx;
            height: 38rpx;
            color: #ffaa01;
            background: rgba(255, 170, 1, 0.05);
            border-radius: 40rpx 40rpx 40rpx 40rpx;
          }
          .provincial {
            width: 128rpx;
            height: 38rpx;
            color: #d6262c;
            background: rgba(214, 38, 44, 0.05);
            border-radius: 40rpx 40rpx 40rpx 40rpx;
          }
          .member {
            width: 80rpx;
            height: 38rpx;
            background: #f2fbfa;
            color: #01ada8;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
          }
        }

        .list-card-right {
          width: 244rpx;
          height: 32rpx;
          color: #262626;
          font-size: 32rpx;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          position: absolute;
          right: 32rpx;
          image {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }

      .list-card-footer {
        width: 312rpx;
        height: 32rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #8c8c8c;
        line-height: 32rpx;
        margin-top: 20rpx;
      }
    }

    .notuse-line {
      position: absolute;
      left: 50rpx;
      padding-top: 40rpx;
    }
  }
}
.content-lists-top {
  padding: 34rpx 32rpx 0rpx 32rpx;
  display: flex;
  justify-content: space-between;
  text {
    font-weight: 400;
    font-size: 28rpx;
    color: #8c8c8c;
    line-height: 36rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    .content-lists-top-num {
      font-weight: bold;
      font-size: 32rpx;
      color: #8c8c8c;
      line-height: 44rpx;
      text-align: right;
      font-style: normal;
      text-transform: none;
    }
  }
}

.content-list {
  width: 702rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  box-sizing: border-box;
  padding: 0rpx 32rpx 40rpx 32rpx;
  .content-list-item {
    padding-top: 32rpx;
    padding-bottom: 32rpx;
    margin-bottom: 8rpx;
    border-bottom: 1rpx solid #d9d9d9;
  }
  .content-list-item:last-child {
    // padding-top: 32rpx;
    padding-bottom: 0rpx;
    border-bottom: none;
  }
  .content-list-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .content-list-item-name {
      display: flex;
      align-items: center;
      justify-content: center;
      .lv-name {
        font-weight: 400;
        font-size: 24rpx;
        color: #01ada8;
        line-height: 34rpx;
        margin-left: 14rpx;
        padding: 2rpx 15rpx;
        background: rgba(1, 173, 168, 0.1);
        border-radius: 40rpx 40rpx 40rpx 40rpx;
      }
      .lv-name-101 {
        color: #01ada8;
        background: rgba(1, 173, 168, 0.1);
      }
      .lv-name-201 {
        color: #78a009;
        background: #f8faf2;
      }
      .lv-name-301 {
        color: #079bdf;
        background: #f2fafd;
      }
      .lv-name-401 {
        color: #ffaa01;
        background: #fffaf2;
      }
      .lv-name-501 {
        color: #d6262c;
        background: #fdf4f4;
      }
    }

    .content-list-item-phone {
      display: flex;
      // justify-content: flex-end;
      justify-content: flex-end;
      align-items: center;
      font-weight: bold;
      font-size: 32rpx;
      color: #262626;
      line-height: 32rpx;
      text-align: right;

      text {
        margin-right: 16rpx;
      }

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .content-list-item-bt {
    font-weight: 400;
    font-size: 24rpx;
    color: #8c8c8c;
    line-height: 32rpx;
    text-align: left;
    margin-top: 20rpx;
  }
}
